<template>
    <div class="box box_mm">
        <div class="box_main">
            <div class="search_box">
                <div style="display: flex; height: 100%">
                    <div class="search_item">
                        <span style="width: 1rem">运单编号</span>
                        <el-input
                            v-model="search_name"
                            placeholder="请输入"
                            style="width: 2rem"
                            @keyup.enter="search"></el-input>
                    </div>
                </div>
                <div class="search_item">
                    <el-button
                        type="primary"
                        class="btn_bgcolor"
                        @click="search"
                        >搜索</el-button
                    >
                    <el-button type="info" @click="reset">重置</el-button>
                </div>
            </div>
            <div class="box_cont">
                <div class="btn_list">
                    <!-- <el-button class="mybtn btn_bgcolor" type="primary" @click="daochu">导出</el-button> -->
                </div>
                <div
                    class="mytabbox"
                    style="
                        height: 81vh;
                        padding-top: 10px;
                        box-sizing: border-box;
                    ">
                    <Table
                        :tableheader="tableheader"
                        :tabledata="tabledata"
                        ref="mytable"
                        czwidth="220px">
                        <template v-slot:btns="row">
                            <el-button
                                @click="detail(row.row.row)"
                                type="primary"
                                size="small"
                                style="margin-right: 0.1rem">
                                详情
                            </el-button>
                            <el-button
                                @click="edit(row.row.row)"
                                v-if="row.row.row.ordertype == 1"
                                type="success"
                                size="small"
                                style="margin-right: 0.1rem">
                                已完成
                            </el-button>
                        </template>
                    </Table>
                </div>
            </div>
        </div>

        <add ref="tcbox" :ruleForm="ruleForm"></add>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, provide,toRaw,reactive } from "vue";
import Table from "@/components/Table.vue";
import { post } from "../../../../api/request";
import { ElMessage, ElMessageBox } from "element-plus";
import add from "./add.vue";
//新增弹出----------

let tcbox = ref<any>(null);
const addnew = () => {
    tcbox.value.showflag = true;
};
//新增弹出end------------------

const ruleForm = reactive({});
//详情-----------------------------
const detail = (row: any) => {   
    post({
        url: "/api/order/details",
        data: {
            id: row.id,
        },
    }).then((res: any) => {
        tcbox.value.showflag = true;
        Object.assign(ruleForm, res.data);
    });
};
//详情end--------------------------

//修改-----------------------------
const edit = (row: any) => {
    ElMessageBox.confirm("请确认是否已完成?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            post({
                url: "/api/order/details",
                data: {
                    id: row.id,
                },
            }).then((res: any) => {
                res.data.ordertype = 2;
                post({
                    url: "/api/order/edit",
                    data: toRaw(res.data),
                }).then((res: any) => {
                    ElMessage.success("操作成功");
                    getdata();
                });
            });
        })
        .catch(() => {});
};
//修改end--------------------------

//冻结----------------
const dongjie = (row: any) => {
    let texttip =
        row.isdel == 1 ? "您确定冻结该人员吗？" : "您确定启用人员吗？";
    console.log(row);
    ElMessageBox.confirm(texttip, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        post({
            url: "/admin/School/editFacilityStatus",
            data: {
                id: row.id,
                type: 1,
                status: row.isdel == 1 ? 2 : 1,
            },
        }).then((res: any) => {
            ElMessage.success("操作成功!");
            getdata();
        });
    });
};
//冻结end------------

//删除----------------
const detelerow = (row: any) => {
    ElMessageBox.confirm("确定删除该人员吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        post({
            url: "/api/rygl/del",
            data: {
                ids: row.id,
            },
        }).then((res: any) => {
            ElMessage.success("删除成功!");
            getdata();
        });
    });
};
//删除end-------------

//搜索字段
let search_name = ref("");
let search_type = ref(0);
//定义表头的数据
const tableheader = ref([
    { key: "orderCode", name: "运单编号", width: "" },
    { key: "product_num", name: "转运重量(kg)", width: "" },
    { key: "danwei_name", name: "转运公司", width: "" },
    {
        key: "ordertype",
        name: "状态",
        width: "100",
        type: "tags",
        typedata: [
            { type: "danger", value: 1, label: "待确定" },
            { type: "success", value: 2, label: "已完成" },
        ],
    },
    { key: "saleTime_data", name: "转运时间", width: "" },
]);
//定义表格的数据
let tabledata = ref([]);
const mytable = ref({ currentp: 1 });

// 在 onMounted 钩子中发送请求
onMounted(() => {
    console.log(mytable.value?.currentPage);
    getdata();
});

const getdata = () => {
    post({
        url: "/api/order/qyindex",
        data: {
            orderCode: search_name.value, //搜索名称
            p: mytable.value?.currentPage, //当前页数
            size: 15, //每页显示数量
        },
    }).then((res: any) => {
        mytable.value.total = res.data.count;

        res.data.list.forEach((item: any) => {
            item.saleTime_data = changetime(item.saleTime);
        });

        tabledata.value = res.data.list;
    });
};
const changetime = (timestamp: Number) => {
    let date = new Date(timestamp * 1000);
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    let hours = date.getHours();
    let minutes = date.getMinutes();
    let seconds = date.getSeconds();

    month = month < 10 ? "0" + month : month;
    day = day < 10 ? "0" + day : day;
    hours = hours < 10 ? "0" + hours : hours;
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
    );
};
const search = () => {
    mytable.value.currentPage = 1;
    getdata();
};
const reset = () => {
    search_name.value = "";
    search_type.value = 0;
    mytable.value.currentPage = 1;
    getdata();
};

provide("getdata", getdata);
</script>

<style lang="scss" scoped>
@import url("../../index.scss");
</style>
